/**
 * 引入React Router的Outlet组件
 * Outlet用于渲染嵌套路由中的子路由组件
 */
import { Outlet } from "react-router-dom";
import GlobalHeader from "../components/GlobalHeader.jsx";
import GlobalFooter from "../components/GlobalFooter.jsx";
import './MainLayout.css'
/**
 * MainLayouts组件
 * 作为应用的主要布局组件，包含了导航栏、内容区域和页脚
 * 内容区域使用Outlet来动态渲染当前路由对应的组件
 * 
 * @returns {JSX.Element} 返回包含导航栏、内容区和页脚的布局结构
 */
export default function MainLayouts() {
    return (
        <div className="mainLayout">
            {/* 导航栏组件 */}
            <div className="header">
                <GlobalHeader />
            </div>
            {/* 主要内容区域，用于显示子路由组件 */}
            <main className="content">
                <Outlet />
            </main>
            {/* 页脚组件 */}
            <div className="footer">
                <GlobalFooter />
            </div>
        </div>
    )
}
